import "./index.scss"
import {View, Text, Input, Image, Switch} from "@tarojs/components"
import {observer} from "mobx-react"
import {useContext, useEffect, useState} from "react"
import {useDidHide, useDidShow, useRouter} from "@tarojs/taro"
import {devControllStore} from "./model"
import {uSelectDevControl} from "@/api/setting"
import {ControllBtn} from "./componentss"
import Taro from "@tarojs/taro"
import {
	AtForm,
	AtIcon,
	AtSwitch,
	AtInput,
	AtButton,
	AtInputNumber,
	AtDivider,
	AtAccordion
} from "taro-ui"
import {airControlApi} from "@/api/airControl"

const Devcontroll = () => {
	let router = useRouter()
	const {updatePageQuery, clearPageQuery, pageQuery} = useContext(devControllStore)

	const [dataSource, setDataSource] = useState<Setting.DevControll[]>([])

	function updatePageDataSource() {
		if (!pageQuery.devId) return
		uSelectDevControl({
			devId: pageQuery.devId
		})
			.then(res => {
				setDataSource(res.data)
			})
			.catch(err => {
				setDataSource([])
			})
	}

	// 可以使用所有的 React Hooks
	useEffect(() => {
		console.log("Devcontroll useEffect dataSource", dataSource)
		readDataFunc()
	}, [])

	// 可以使用所有的 React Hooks
	useEffect(() => {
		console.log("Devcontroll useEffect")
		updatePageDataSource()
	}, [pageQuery])
	// 对应 onShow
	useDidShow(() => {
		console.log("Devcontroll useDidShow")
		updatePageQuery(router.params)
		updatePageDataSource()
	})
	// 对应 onHide
	useDidHide(() => {
		console.log("Devcontroll useDidHide")
		clearPageQuery()
	})

	// 温度第一次请求数据（原始数据，用来做修改对比）
	const [initTempData, setInitTempData] = useState([
		{
			name: "制冷开启温度",
			value: "--",
			isInput: false,
			unit: "℃",
			max: 55.0,
			min: 20.0,
			nName: "temp1",
			isUpdate: false
		},
		{
			name: "制冷停止温度",
			value: "--",
			isInput: false,
			unit: "℃",
			max: 35.0,
			min: 15.0,
			nName: "temp2",
			isUpdate: false
		},
		{
			name: "加热开启温度",
			value: "--",
			isInput: false,
			unit: "℃",
			max: 15.0,
			min: -30.0,
			nName: "temp3",
			isUpdate: false
		},
		{
			name: "加热停止温度",
			value: "--",
			isInput: false,
			unit: "℃",
			max: 23.0,
			min: 0.0,
			nName: "temp4",
			isUpdate: false
		}
	])

	// 读取空调状态和温度数据的函数
	const readDataFunc = async () => {
		Taro.showLoading({
			title: "加载中",
			mask: true
		})
		let readTempJson = jsonJoinFunc("1001")
		let readAirJson = jsonJoinFunc("1002")
		// console.log(readJson)

		// 空调状态
		await airControlApi(readAirJson)
			.then(res => {
				if (res.data.result == "error") {
					// error
					devErrorToastFunc(res.data.msg)
				} else if (res.data.result == "") {
					// success
					console.log(res, "返回空调状态数据")
					if (res.data == 0) {
						console.log("空调默认关闭")
						setSwitchStatus(false)
					} else if (res.data.data == 1) {
						console.log("空调默认开启")
						setSwitchStatus(true)
					}
				}
			})
			.then(() => {
				// 温度数据
				airControlApi(readTempJson)
					.then(res => {
						console.log(res, "返回空调温度数据")
						fourTempData.forEach((item, index) => {
							item.value = res.data.data[0][item.nName]
						})
						setInitTempData([...fourTempData])
						Taro.setStorageSync("initTempData", fourTempData)
						// initTempData.forEach((item, index) => {
						// 	item.value = res.data.data[0][item.nName]
						// })
						// setInitTempData([...initTempData])
						// window.localStorage.setItem("initTempData", JSON.stringify(initTempData))
						Taro.hideLoading()
					})
					.catch(err => {
						Taro.hideLoading()
						Taro.showToast({
							title: err.msg,
							icon: "error",
							duration: 2000,
							mask: true
						})
					})
					.finally(info => {
						setIsShowSwitch(false)
						setIsShowSwitch(true)
					})
			})
			.catch(err => {
				Taro.hideLoading()
				Taro.showToast({
					title: err.msg,
					icon: "error",
					duration: 2000,
					mask: true
				})
			})
			.finally(info => {
				setIsShowSwitch(false)
				setIsShowSwitch(true)
			})
	}
	// json拼接函数
	/*
    1001   读取数据
    1002   设置温度
    1003   空调开启
    1004   空调关闭
  */
	const jsonJoinFunc = (code, tempData: {tempName: string; tempValue: number}) => {
		console.log(router.params)

		let data = {
			devGId: router.params.devGId,
			command: "",
			commandType: "send",
			result: "",
			msg: "",
			data: ""
		}
		switch (code) {
			case "1001":
				console.log("拼接-读取温度数据")
				data.command = "readTemp"
				break

			case "1002":
				console.log("拼接-读取开关状态")
				data.command = "readAir"
				break

			case "1003":
				console.log("拼接-设置温度")
				data.command = "editTemp"
				let jsonDataTempData = []
				let tempZ = {}
				tempZ[tempData.tempName] = parseInt(tempData.tempValue)
				jsonDataTempData.push(tempZ)
				data.data = jsonDataTempData
				break

			case "1004":
				console.log("拼接-空调开启")
				data.command = "openAir"
				break

			case "1005":
				console.log("拼接-空调关闭")
				data.command = "closeAir"
				break

			default:
				break
		}
		return data
	}

	// 提交的json数据模板
	// const jsonDataTemp =

	// 开关状态
	const [switchStatus, setSwitchStatus] = useState(false)

	// 开关的change事件
	const switchChange = async e => {
		console.log(e)

		console.log(switchStatus, "当前状态")
		let zSwitchStatus = switchStatus
		let fSwitchStatus = !switchStatus

		if (e) {
			// 开启 - open
			Taro.showLoading({
				title: "正在开启中...",
				mask: true
			})
			let jsonData = jsonJoinFunc("1004")
			await airControlApi(jsonData)
				.then(res => {
					// console.log(res)
					console.log(res, "开启res")
					if (res.data.result == "success") {
						Taro.hideLoading()
						Taro.showToast({
							title: res.msg,
							icon: "success",
							duration: 2000,
							mask: true
						})
						setSwitchStatus(fSwitchStatus)
					} else if (res.data.result == "error") {
						devErrorToastFunc(res.data.msg)
					}
				})
				.catch(err => {
					console.log(err, "关闭err")
					Taro.hideLoading()
					Taro.showToast({
						title: err.msg,
						icon: "success",
						duration: 2000,
						mask: true
					})
					// setSwitchStatus(!switchStatus)
					setSwitchStatus(switchStatus)
				})
				.finally(info => {
					console.log(info, "finally")
					setIsShowSwitch(false)
					setIsShowSwitch(true)
					// Taro.hideLoading()
				})
		} else {
			// 关闭 - close
			Taro.showLoading({
				title: "正在关闭中...",
				mask: true
			})
			let jsonData = jsonJoinFunc("1005")
			await airControlApi(jsonData)
				.then(res => {
					console.log(res, "关闭成功res")
					if (res.data.result == "success") {
						Taro.hideLoading()
						Taro.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000,
							mask: true
						})
						setSwitchStatus(fSwitchStatus)
					} else if (res.data.result == "error") {
						devErrorToastFunc(res.data.msg)
					}
				})
				.catch(err => {
					console.log(err, "关闭err")

					Taro.hideLoading()
					Taro.showToast({
						title: err.msg,
						icon: "none",
						duration: 2000,
						mask: true
					})

					// setSwitchStatus(!switchStatus)
					setSwitchStatus(switchStatus)
				})
				.finally(info => {
					console.log(info, "finally")
					setIsShowSwitch(false)
					setIsShowSwitch(true)
					// Taro.hideLoading()
				})
		}
	}

	// 展开温度设置的标识
	const [isOpenTempSetting, setIsOpenTempSetting] = useState(false)

	// 调整展开温度设置的标识的函数
	const setIsOpenTempSettingFunc = () => {
		setIsOpenTempSetting(!isOpenTempSetting)
	}

	// 四个温度数据
	const [fourTempData, setFourTempData] = useState([
		{
			name: "制冷开启温度",
			value: "--",
			isInput: false,
			unit: "℃",
			max: 55.0,
			min: 20.0,
			nName: "temp1",
			isUpdate: false
		},
		{
			name: "制冷停止温度",
			value: "--",
			isInput: false,
			unit: "℃",
			max: 35.0,
			min: 15.0,
			nName: "temp2",
			isUpdate: false
		},
		{
			name: "加热开启温度",
			value: "--",
			isInput: false,
			unit: "℃",
			max: 15.0,
			min: -30.0,
			nName: "temp3",
			isUpdate: false
		},
		{
			name: "加热停止温度",
			value: "--",
			isInput: false,
			unit: "℃",
			max: 23.0,
			min: 0.0,
			nName: "temp4",
			isUpdate: false
		}
	])

	// 温度的input框的Blur事件
	// const tempInputBlur = (e: any, index: number) => {
	// 	console.log(e, index)
	// 	let data = fourTempData
	// 	data.forEach((item, indexd) => {
	// 		if (indexd == index) {
	// 			item.value = Number(e.target.value)
	// 		}
	// 	})
	// 	setFourTempData([...data])
	// }

	// 温度的input框的Change事件
	// const tempInputChange = (e: any, index: number) => {
	// 	console.log(e, index)
	// 	let data = fourTempData
	// 	data.forEach((item, indexd) => {
	// 		if (indexd == index) {
	// 			item.value = e
	// 		}
	// 	})
	// 	setFourTempData([...data])
	// }

	// input的change事件
	const inputInput = (e, index, d) => {
		// 判断当前数据和原始数据有没有出入
		// let initTempDataF = initTempData
		// console.log(initTempDataF)

		// if (e.target.value != initTempDataF[index].value) {
		// 	console.log("有改变")
		// 	fourTempData[index].isUpdate = true
		// } else {
		// 	fourTempData[index].isUpdate = false
		// }
		// setInitTempData([...fourTempData])
		let initTempDataF = Taro.getStorageSync("initTempData")
		console.log(initTempDataF, "initTempDataF")
		if (e.target.value != initTempDataF[index].value) {
			console.log("有改变")
			fourTempData[index].isUpdate = true
		} else {
			fourTempData[index].isUpdate = false
		}
		setInitTempData([...fourTempData])

		// 修改数据
		console.log(e, index)
		let data = fourTempData
		data.forEach((item, indexd) => {
			if (indexd == index) {
				item.value = e.target.value
			}
		})
		setFourTempData([...data])
	}

	// // 修改温度设置点击事件
	// const editTempSettingClick = () => {
	// 	console.log(fourTempData)

	// 	// 温度最大值和最小值校验
	// 	fourTempData.forEach((item, index) => {
	// 		if (item.value > item.max || item.value < item.min) {
	// 			Taro.showToast({
	// 				title: `${item.name} 的温度值必须在 ${item.min} ~ ${item.max} 之间`,
	// 				icon: "none",
	// 				duration: 2000
	// 			})
	// 		}
	// 	})

	// 	let jsonData = jsonJoinFunc("1003")
	// }

	// 修改温度值确定点击事件
	const editTempValueClick = async (index, item) => {
		Taro.showLoading({
			title: "加载中",
			mask: true
		})
		if (item.value > item.max || item.value < item.min) {
			Taro.showToast({
				title: `${item.name} 的温度值必须在 ${item.min} ~ ${item.max} 之间`,
				icon: "none",
				duration: 2000,
				mask: true
			})
			return
		}

		let jsonData = jsonJoinFunc("1003", {
			tempName: item.nName,
			tempValue: item.value
		})

		await airControlApi(jsonData)
			.then(res => {
				console.log(res, "设置温度res")
				if (res.data.result == "success") {
					Taro.hideLoading()
					Taro.showToast({
						title: res.msg,
						icon: "success",
						duration: 2000,
						mask: true
					})

					// 将原始温度数据修改相应的值
					let initTempDataF = Taro.getStorageSync("initTempData")
					initTempDataF[index].value = item.value
					console.log(initTempDataF)
					Taro.setStorageSync("initTempData", initTempDataF)

					// 修改完之后，将按钮状态还原
					fourTempData.forEach((itemF, indexF) => {
						if (indexF == index) {
							item.isUpdate = false
						}
					})
					setFourTempData([...fourTempData])
				} else if (res.data.result == "error") {
					devErrorToastFunc(res.data.msg)
				}
			})
			.catch(err => {
				Taro.hideLoading()
				Taro.showToast({
					title: err.msg,
					icon: "error",
					duration: 2000,
					mask: true
				})
			})
	}

	// 设备错误码提示函数
	const devErrorToastFunc = (flag: string) => {
		switch (flag) {
			case "001":
				Taro.showToast({
					title: "空调运行异常!",
					icon: "none",
					duration: 2000,
					mask: true
				})
				break
			case "002":
				Taro.showToast({
					title: "设备编码错误!",
					icon: "none",
					duration: 2000,
					mask: true
				})
				break

			default:
				break
		}
	}

	// 是否显示开关的标识
	const [isShowSwitch, setIsShowSwitch] = useState(true)

	return (
		<View className="container bg-xx_bg">
			<View className="hanzi text-16 font-bold mt-23 mb-14 px-16">空调控制</View>
			<View className="hanzi text-14 text-xx_text mb-14 px-16">G8815空调控制</View>
			<View>
				{/* <Switch
					checked={switchStatus}
					onChange={e => {
						switchChange(e)
					}}
				/> */}
				{isShowSwitch ? (
					<AtSwitch
						title="空调开关"
						checked={switchStatus}
						onChange={e => {
							switchChange(e)
						}}
					/>
				) : null}

				<AtAccordion
					open={isOpenTempSetting}
					onClick={setIsOpenTempSettingFunc}
					title="温度设置"
					isAnimation={false}
				>
					<View>
						<AtForm>
							{fourTempData.map((item, index) => (
								<View class="temp_item_view_box">
									<Text class="temp_item_label">{item.name}</Text>
									{isOpenTempSetting ? (
										<Input
											type="digit"
											value={item.value}
											placeholder={`请输入温度值`}
											onInput={e => {
												inputInput(e, index, item)
											}}
											class="digit_input"
										/>
									) : null}
									<Text class="temp_item_unit">{item.unit}</Text>
									{item.isUpdate ? (
										<Image
											src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/icon/accomplish.png"
											class="accomplish_btn"
											onClick={() => {
												editTempValueClick(index, item)
											}}
										></Image>
									) : (
										<Image
											src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/icon/accomplish_d.png"
											class="accomplish_btn"
										></Image>
									)}
								</View>
							))}
						</AtForm>
						{/* <View class="btn_box">
							<AtButton type="primary" onClick={editTempSettingClick}>
								修改温度设置
							</AtButton>
						</View> */}
					</View>
				</AtAccordion>
				{/* <View>
					<AtDivider content="温度设置" fontColor="#2d8cf0" lineColor="#2d8cf0" />
				</View> */}
			</View>
		</View>
	)
}
export default observer(Devcontroll)
